<template>
	<view class="content">
		<view class="box">
			<view class="withdrawal">
				<view class="withdrawal-top">
					<view class="withdrawal-top-left">
						可提现佣金
					</view>
					<view class="withdrawal-top-right">
						<view class="withdrawal-btn" @click="goCash">
							提现
						</view>
					</view>
				</view>
				<view class="withdrawal-intermediate">
					{{memberhome.amount}}
				</view>
				<view class="withdrawal-bottom">
					<view class="withdrawal-bottom-left">
						<view class="withdrawal-bottom-text">
							已提现佣金
						</view>
						<view class="withdrawal-bottom-amount">
							{{memberhome.pay_amount}}
						</view>
					</view>
					<view class="withdrawal-bottom-right">
						<view class="withdrawal-bottom-text">
							未结算佣金
						</view>
						<view class="withdrawal-bottom-amount">
							{{memberhome.unset_amount}}
						</view>
					</view>
				</view>
			</view>
			<view class="withdrawallist">
				<view class="title">
					佣金明细
				</view>
				<view class="subscription-item" v-if="incomeList.length == 0">
					<u-empty mode="list"></u-empty>
				</view>
				<view class="item" v-for="item in incomeList" v-else>
					<view class="left">
						<view class="name">
							{{item.phone}}购买
						</view>
						<view class="time">
							{{item.update_time}}
						</view>
					</view>
					<view class="right">
						+{{item.commission}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		gardMobile
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				memberhome: {},
				incomeList: [],
				paging: {
					page: 1,
					limit: 10,
				},
				total: null,
			}
		},
		onLoad() {
			this.getIncomeList()
		},
		onShow() {
			this.getMemberHome()
		},
		onReachBottom() {
			this.getIncomeList()
		},
		onPullDownRefresh() {
			uni.startPullDownRefresh({
				success: () => this.refresh(),
				complete: () => uni.stopPullDownRefresh()
			})
		},
		methods: {
			goCash() {
				uni.navigateTo({
					url: '/pages/person/my/cash'
				})
			},
			getMemberHome() {
				this.$api.memberhome().then(res => {
					this.memberhome = res.data
				})
			},
			getIncomeList() {
				if (this.incomeList.length == this.total) return
				this.$api.IncomeList(this.paging).then(res => {
					const arr = res.data.list.map(item => {
						return {
							...item,
							phone: gardMobile(item.mobile)
						}
					})
					this.incomeList = [...this.incomeList, ...arr]
					this.total = res.data.total
					this.paging.page++
				})
			},
			// 刷新列表
			refresh() {
				this.paging.page = 1
				this.total = null
				this.incomeList = []
				this.getIncomeList()
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #f5f5f5;
		min-height: 100vh;
		z-index: -1;
	}

	.box {
		padding: 0 30rpx;
	}

	.withdrawal {
		// height: 240rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 32rpx;

		.withdrawal-top {
			display: flex;
			justify-content: space-between;

			.withdrawal-top-left {
				padding-top: 8rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 36rpx;
				color: #111111;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}

			.withdrawal-top-right {
				.withdrawal-btn {
					width: 140rpx;
					height: 64rpx;
					background: linear-gradient(270deg, #EA6F29 0%, #FAAA7D 100%);
					border-radius: 16rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 64rpx;
					text-align: center;
					font-style: normal;
				}
			}
		}

		.withdrawal-intermediate {
			padding-top: 12rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 64rpx;
			color: #E85D0E;
			line-height: 90rpx;
			text-align: left;
			font-style: normal;
		}

		.withdrawal-bottom {
			padding-top: 28rpx;
			display: flex;
			justify-content: start;

			.withdrawal-bottom-right {
				padding-left: 120rpx;
			}

			.withdrawal-bottom-left,
			.withdrawal-bottom-right {
				display: flex;

				.withdrawal-bottom-text {
					padding-right: 12rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 36rpx;
					color: #999999;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}

				.withdrawal-bottom-amount {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 36rpx;
					color: #E85D0E;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}
	}

	.withdrawallist {
		margin-top: 20rpx;
		padding: 40rpx 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.title {
			padding-bottom: 20rpx;
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #111111;
			line-height: 44rpx;
			font-style: normal;
		}

		.item {
			padding: 30rpx 0;
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #e7e7e7;

			.left {
				.name {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 36rpx;
					color: #111111;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}

				.time {
					padding-top: 2rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 24rpx;
					color: #999999;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
				}
			}

			.right {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #D06122;
				line-height: 60rpx;
				text-align: left;
				font-style: normal;
			}
		}
	}
</style>